<template>
	<view class="settlement">
		<u-navbar
			title="商家入驻"
			:autoBack="true"
			:placeholder="true"
		>
		</u-navbar>
		<u--form
		labelPosition="left"
		:model="formset"
		ref="setfor"
		:rules="rules"
		labelWidth="100px"
		:label-style="{'font-size':'28rpx','margin-top':'20rpx'}"
		>
		<u-form-item label="商户名称" borderBottom prop="store_name">
			<u--input border="none" placeholder="填写商户名称" v-model="formset.store_name"></u--input>
		</u-form-item>
		<u-form-item label="用户姓名" borderBottom prop="name">
			<u--input border="none" placeholder="填写用户姓名" v-model="formset.name"></u--input>
		</u-form-item>
		<u-form-item label="联系电话" borderBottom prop="phone">
			<u--input border="none" placeholder="请填写电话号码" v-model="formset.phone"></u--input>
		</u-form-item>
		<u-form-item label="店铺类型" borderBottom prop="store_type">
			<label @click="sheet = true">
			<u--input disabled disabledColor="#fff" 
			placeholder="请选择店铺类型" border="none" 
			v-model="formset.store_type"
			></u--input>
			</label>
			<u-icon slot="right" name="arrow-right" @click="sheet = true"></u-icon>
		</u-form-item>
		<u-form-item  prop="license">
			<view class="upload">
				<view class="up-title">
				<view>请上传营业执照及行业相关资质证明图片</view>
				<text>(图片仅上传一张,图片格式支持JPG、PNG、JPEG...)</text>
				</view>
				<u-upload
					:fileList="fileList3"
					@afterRead="afterRead"
					@delete="deletePic"
					name="3"
					accept="image"
					capture
					:maxCount="1"
					:previewFullImage="true"
				></u-upload>
			</view>
		</u-form-item>
		<u-form-item prop="idcard">
			<view class="idcard">
				<view class="idcard-title" @click="upimageapi">请上传证件照</view>
				<u-upload
					:fileList="fileList6"
					@afterRead="afterRead"
					@delete="deletePic"
					name="6"
					:maxCount="1"
					width="250"
					height="150"
					uploadText="身份证人像面"
				>
				<image src="https://xixijj.oss-cn-chengdu.aliyuncs.com/attach/2023/10/9190d202310091540435057.png" 
					mode="widthFix" style="width: 250px;height: 150px;"></image>
				</u-upload>
			</view>
		</u-form-item>
		<u-form-item prop="idcard">
			<view class="idcard">
			<u-upload
				:fileList="fileList8"
				@afterRead="afterRead"
				@delete="deletePic"
				name="8"
				:maxCount="1"
				width="250"
				height="150"
				uploadText="身份证国徽面"
			>
			<image src="https://xixijj.oss-cn-chengdu.aliyuncs.com/attach/2023/10/a017b202310091540419789.png"
				mode="widthFix" style="width: 250px;height: 150px;"></image>
			</u-upload>
			</view>
		</u-form-item>
		</u--form>
		<view class="up-footer">
			<label class="radio" @click="show = !show">
				<radio :disabled="show" checked="true" style="transform:scale(0.7)" color="#4CC073"/>
				已阅读并同意 
			</label>
			<navigator url="../page_my/privacypact?type=2" :class="{state:show}">《入驻协议》</navigator>
		</view>
		<view class="sbmitbtn">
			<u-button @click="btnok" type="primary" text="提交申请" shape="circle"></u-button>
		</view>
		<u-action-sheet :actions="typelist" title="店铺类型"
		 :show="sheet" @select="formset.store_type = $event.name"
		 closeOnClickOverlay
		 @close = 'sheet = false'
		 ></u-action-sheet>
		 <u-toast ref="mercset"></u-toast>
	</view>
</template>

<script>
	import {storeapply,storetype} from '@/api/protocol.js'
	import {uploadimage} from '@/utils/upload.js'
	export default{
		data(){
			return{
				show:true,
				sheet:false,
				typelist:[],
				fileList3:[],
				fileList6:[],
				fileList8:[],
				formset:{
					store_name:'',
					name:'',
					phone:'',
					store_type:'',
					license:'',
					idcard:''
				},
				rules:{
					'store_name':[{required:true,message:'请填写商户名称',trigger: ['blur']}],
					'name':[{required:true,message:'请填写用户姓名',trigger: ['blur']}],
					'phone':[{required:true,message:'请填写联系电话',trigger: ['blur']},
							  {pattern:'^1[3456789]\\d{9}$',message:'请填写正确的手机号'}
							],
					'store_type':[{required:true,message:'请选择店铺类型',trigger: ['blur']}],
					'license':[{required:true,message:'请上传营业执照',trigger: ['blur']}],
					'idcard':[{required:true,message:'请上传证件正反',trigger: ['blur']}]
				}
			}
		},
		methods:{
			async afterRead(event){
				this[`fileList${event.name}`] = [].concat(event.file)
				const res = await uploadimage(event.file.url)
				if(event.name === "3")this.formset.license = res.url
				if(event.name === "6" || event.name === "8"){
					this.formset.idcard ? this.formset.idcard += "," + res.url : this.formset.idcard = res.url
				}
			},
			deletePic(event){
				this[`fileList${event.name}`].splice(event.index, 1)
				this.fileList3.length == 0? this.formset.license = '':this.formset.license
				this.fileList6.length == 0 && this.fileList8.length == 0? this.formset.idcard = '':this.formset.idcard
			},
			async gettype(){
				const res = await storetype()
				this.typelist = res.data
			},
			btnok(){
				this.$refs.setfor.validate().then(async res=>{
					if(this.show){
						this.$refs.mercset.show({
							message: "同意并勾选《入驻协议》"
						})
					}else{
						await storeapply(this.formset)
						uni.showToast({
							title:'申请已提交',
							icon:'success'
						})
					}
				}).catch(err =>{
					console.log('校验失败');
				})
			}
		},
		onLoad() {
			this.gettype()
		}
	}
</script>

<style lang="scss">
	.settlement{
		padding: 0 40rpx;
		padding-bottom: 50rpx;
	}
	.upload{
		margin-top: 40rpx;
		.up-title{
			margin-bottom: 30rpx;
			view{
				color: #6c6c6c;
			}
			text{
				font-size: 22rpx;
				color: #c4c4c4;
			}
		}
	}	
	.idcard {
	.idcard-title{
		margin-bottom: 30rpx;
		color: #6c6c6c;
		}
	.u-upload .u-upload__wrap .data-v-49deb6f2{
		margin: 0 auto;
	}
	}
	.up-footer{
		margin-top: 50rpx;
		display: flex;
		font-size: 24rpx;
		align-items: center;
		.radio{
			line-height: 54rpx;
		}
		navigator{
			color:#4CC073;
		}
	}			
	.state{
		color: #999;
	}
	.sbmitbtn{
		margin-top: 50rpx;
		padding: 0 40rpx;
	}
</style>